<script setup>
import { ref, onActivated, onDeactivated, computed, reactive } from 'vue'
// ref 使用
const countNumber = ref(0)
//computed 使用
const plusOne = computed(() => countNumber.value + 1)

//reactive 使用
const obj = reactive({ count: 0 })
obj.count++

onActivated(() => {
  console.log('onActivated')
})
onDeactivated(() => {
  console.log('onDeactivated')
})
</script>

<template>
  <div>Current component:A</div>
  <div>count:{{ countNumber }}</div>
  <div>couut plusOne: {{ plusOne }}</div>
  <button @click="countNumber++">+</button>
</template>
